<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>登录</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background: url(./img/bg.png);
				background-size: 83%;
			}
			
			.container {
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			
			.nav {
				margin-top: 140px;
				display: flex;
				height: 350px;
				flex: 0 0 58%;
				background-color: #fff;
			}
			
			.left {
				flex: 0 0 59%;
				padding: 30px 0;
				text-align: center;
				flex-wrap: wrap;
			}
			
			.right {
				flex: 0 0 41%;
				background: url(./img/bg-login.png);
				background-size: cover;
				padding: 70px 0;
				flex-wrap: wrap;
				position: relative;
			}
			
			.right p {
				display: block;
				flex: 0 0 100%;
				color: #fff;
				font-family: "微软雅黑";
				padding: 0 40px;
				font-size: 17px;
			}
			
			.right img {
				position: absolute;
				top: 40%;
				left: 44%;
			}
			
			.left h1 {
				font-family: "微软雅黑";
				font-size: 50px;
				font-weight: 500;
			}
			
			.left input {
				height: 40px;
				width: 260px;
				border: 1px solid #e5e5e5;
				border-radius: 3px;
				color: #888;
				padding: 0 50px;
			}
			
			.left .one {
				background-image: url(img/yonghuming.png);
				background-repeat: no-repeat;
				background-position: 20px;
			}
			
			.left .two {
				background-image: url(img/mima.png);
				background-repeat: no-repeat;
				background-position: 20px;
			}
			
			.left button {
				width: 362px;
				height: 40px;
				color: #fff;
				background-color: #7554bf;
				border-radius: 5px;
				border: 1px solid;
				font-family: "微软雅黑";
				font-size: 17px;
				margin-top: 35px;
				cursor: pointer;
			}
			
			.left button:hover {
				background-color: #6e32f3;
				;
			}
			
			@media (max-width:600px) {
				.nav {
					display: block;
				}
				.right img {
					left: 36%;
					top: 60%;
				}
			}
		</style>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	</head>

	<body>
		<div class="container">
			<div class="nav">
				<div class="left">
					<h1>LOGO</h1>
					<input type="" name="" id="" value="" placeholder="用户名或手机号" / style="margin-top: 30px;" class="one">
					<input type="" name="" id="" value="" placeholder="请输入登录密码" / style="margin-top: 10px;" class="two"><br />
					<button>登录</button>
				</div>
				<div class="right">
					<p>企业注册及企业认领通道</p>
					<p style="padding-top: 50px;">注册及认领</p>
					<a href=""><img src="img/youjiantou.png" alt="" /></a>
				</div>
			</div>
		</div>
	</body>

</html>